import React from 'react';
import { Box, GridItem, Grid, Icon, useViewport } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { CardItem, SellingCardItem } from './SellingCardItem';

type CompareCardsProps = {
  newContract: CardItem;
  currentContract?: CardItem;
  color?: MainColorType;
  isLoading?: boolean;
};

export const CompareCards = ({
  newContract,
  currentContract,
  color = 'pink',
  isLoading,
}: CompareCardsProps) => {
  const { isSmall, isMedium } = useViewport();

  return (
    <Grid gridTemplate={{ sm: 7, lg: 11 }}>
      {currentContract && (
        <GridItem gridColumn={{ sm: 'span7', lg: 'span5' }}>
          <SellingCardItem
            sellingCardItem={currentContract}
            priceUnit="á mán"
            color={color}
            isDisabled={isLoading}
            hasButton={false}
          />
        </GridItem>
      )}
      {currentContract && (
        <GridItem gridColumn={{ sm: 'span7', lg: 'span1' }}>
          <Box display="flex" justifyContent="center" alignItems="center" height="100%">
            <Icon
              icon={isSmall || isMedium ? 'arrowDown' : 'longArrowRight'}
              size={48}
              color="grey500"
            />
          </Box>
        </GridItem>
      )}
      <GridItem gridColumn={{ sm: 'span7', lg: 'span5' }}>
        <SellingCardItem
          sellingCardItem={newContract}
          selectedCard={newContract}
          priceUnit="á mán"
          color={color}
          isDisabled={isLoading}
          hasButton={false}
        />
      </GridItem>
    </Grid>
  );
};